<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first blog-首页</title>
    <link rel="stylesheet" href="./css/home.css">
    <script type="text/javascript" src="../first-ui/components/Header/first-header-a.js"></script>
    <script type="text/javascript" src="./../first-ui/components/Footer/index.js"></script>
    <script type="text/javascript" src="./../first-ui/components/Typed/index.js"></script>
</head>

<body>
    <first-header-a></first-header-a>
    <!-- 第一屏 -->
   <section class="one">
    <!-- 主页内容 -->
    <div class="home-content">
        <!-- 主页标题 -->
        <h3>Hello,I'm Zhang Jinxin</h3>
        <h1>Welcome To First Blog</h1>
        <!-- 主页小标题 -->
        <h3>个人介绍
            <!-- 小标题下的文本 -->
            <span class="text">
            </span>
        </h3>
        <!-- 主页正文 -->
        <p>追求源于热爱！！！Cheer for you!</p>
    </div>
    <!-- 主页图片 -->
        <div class="wrap">
            <div class="card">
                <div class="role">
                    <img src="http://q2.qlogo.cn/headimg_dl?dst_uin=2770496921&spec=640"
                        alt="">
                </div>
                <div class="content">
                    <first-typed strings='["厉害！这么快就找到我了👍"]' speed="200" font-size="25px" color="#fff">
                    </first-typed>
                    </p>
                </div>

            </div>
        </div>
</section>
    <section id="two">
        <main class="blog">
            <div>
                <div class="title">
                    📑文章
                </div>
                <div class="blog_list">
                    <a href="./blog.html">
                    <div   class="article_item">
                        <img src="images/java_design.jpg" alt="文章封面">
                        <div class="article_content">
                            <h1>重学 Java 设计模式</h1>
                            <p>在这篇文章中，我将重新学习和实现经典的 Java 设计模式。设计模式是软件开发中的重要组成部分，它帮助我们提高代码的复用性、可扩展性和可维护性。</p>
                        </div>
                        <p class="date">2024-12-02</p>
                    </div>
                </a>
                    <div  class="article_item">
                        <img src="images/spring.jpg" alt="文章封面">
                        <div class="article_content">
                            <h1>手写 Spring 框架</h1>
                            <p>本文将带你走进 Spring 框架的核心原理，从零开始手写一个简单的 Spring 核心容器，深入理解 Spring 的依赖注入和控制反转机制。</p>
                        </div>
                        <p class="date">2024-12-02</p>
                    </div>
                 
                        <div  class="article_item">
                            <img src="images/java_interview.png" alt="文章封面">
                            <div class="article_content">
                                <h1>Java 面试常见问题与解答</h1>
                                <p>准备 Java 面试时，了解常见的面试题和深入思考问题背后的原理是至关重要的。在这篇文章中，我将整理一些常见的 Java 面试题，并给出详细的解答和面试技巧。</p>
                            </div>
                            <p class="date">2024-12-02</p>
                        </div>
                
                   
                </div>
        </main>
    </section>
<section class="three">
    <div class="container">
        <h1>关于我们团队</h1>
        <div class="team">
            <div class="member">
                <img src="http://q2.qlogo.cn/headimg_dl?dst_uin=2770496921&spec=640" alt="Zhang Jinxin">
                <div class="info">
                    <h3>张金鑫</h3>
                </div>
            </div>
            <div class="member">
                <img src="http://q2.qlogo.cn/headimg_dl?dst_uin=3409964473&spec=640" alt="Zhang Yuting">
                <div class="info">
                    <h3>张雨婷</h3>
                </div>
            </div>
            <div class="member">
                <img src="http://q2.qlogo.cn/headimg_dl?dst_uin=2783906438&spec=640" alt="Wu Yuting">
                <div class="info">
                    <h3>伍玉婷</h3>
                </div>
            </div>
            <div class="member">
                <img src="http://q2.qlogo.cn/headimg_dl?dst_uin=3541979890&spec=640" alt="Wang Yiying">
                <div class="info">
                    <h3>王怡颖</h3>
                </div>
            </div>
        </div>
    </div>
</section>
    <first-footer></first-footer>
    <script type="text/javascript" src="js/home.js"></script>
</body>
</html>